import { ReactElement, useRef, useEffect } from 'react'
import { Modal, Form, FormInstance, Input, Radio, InputNumber, message } from 'antd'
import { ArbitratorSchema } from '@src/components/schema/arbitrator'
import style from './index.module.less'
import { addRequest, updateRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { checkIdCard } from '@js/identityTest';

// 验证身份证
function validateLicense (value: string) {
  if (typeof value === 'string' && value.length) {
    const e = checkIdCard.test(value)
    if (e) {
      return Promise.reject(new Error(e))
    }
  }
  return Promise.resolve()
}

async function SubmitHandle (d: { [k: string]: any }, hide: () => void, refreshData: () => void): Promise<void> {
  const fn = typeof d.id === 'string' ? updateRequest : addRequest
  const h = message.loading('提交中', 120)
  const [e] = await awaitWrap(fn(d))
  h()
  if (e === null) {
    hide()
    refreshData()
    message.success('提交成功').then(null, null)
  }
}

const { Item } = Form

interface Props {
  value: ArbitratorSchema | null
  visible: boolean
  refreshData: () => void
  hide: () => void
}

function Main ({ value, visible, refreshData, hide }: Props): ReactElement {
  const formRef = useRef<FormInstance>(null)
  useEffect(() => {
    const c = formRef.current
    if (!visible && c !== null) {
      c.resetFields()
    } else if (visible && value !== null) {
      c?.setFieldsValue(value)
    }
  }, [value, visible])
  return (
    <Modal title={value === null ? '添加仲裁员' : '修改仲裁员'} visible={visible} onCancel={hide} onOk={() => formRef.current?.submit()}>
      <Form labelCol={{ flex: '88px' }} ref={formRef} className={style.box} onFinish={async d => await SubmitHandle(d, hide, refreshData)}>
        <Item name='id' noStyle><span /></Item>
        <Item name='name' label='姓名' rules={[{ required: true, message: '姓名不能为空' }]}>
          <Input placeholder='请输入' />
        </Item>
        <Item name='gender' label='性别'>
          <Radio.Group>
            <Radio value='男'>男</Radio>
            <Radio value='女'>女</Radio>
          </Radio.Group>
        </Item>
        <Item name='area' label='所在区域'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='occupation' label='职业分类'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='retire' label='是否退休'>
          <Radio.Group>
            <Radio value={1}>是</Radio>
            <Radio value={0}>否</Radio>
          </Radio.Group>
        </Item>
        <Item name='professional' label='专业'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='structure_post' label='职务'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='license' label='身份证' rules={[{ validator: (rule: any, value: string) => validateLicense(value) }]}>
          <Input placeholder='请输入' maxLength={18} />
        </Item>
        <Item name='mobile' label='手机号'>
          <Input placeholder='请输入' maxLength={11} />
        </Item>
        <Item name='tel' label='电话'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='address' label='地址'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='session' label='第几届'>
          <InputNumber placeholder='请输入' min={0} max={6} className={style.full} />
        </Item>
      </Form>
    </Modal>
  )
}

export default Main
